<template>
  <div>
    <van-nav-bar
      title="我的收藏"
      left-arrow
      fixed
      placeholder
      @click-left="goBack"
    >
      <template #right>
        <van-icon name="search" size="18" />
      </template>
    </van-nav-bar>
    <van-card
      v-for="item in collectGoods"
      :key="item.id"
      :price="item.goods.price + '.00'"
      :desc="item.goods.description"
      :title="item.goods.title"
      :thumb="item.goods.cover_url"
      @click="goodsClick(item.goods.id)"
    />
    <div v-if="collectGoods.length === 0">没有收藏商品。。。</div>
  </div>
</template>
<script>
import { useRouter } from 'vue-router'
import { onMounted, reactive, toRefs } from 'vue'
import { getCollectList } from '../../network/collect'
export default {
  setup () {
    const router = useRouter()
    const state = reactive({
      collectGoods: []
    })
    const init = () => {
      getCollectList().then(res => {
        state.collectGoods = res.data
        console.log(res)
      })
    }
    onMounted(() => {
      init()
    })
    const goodsClick = (goodsId) => {
      router.push({ path: '/detail', query: { id: goodsId } })
    }
    const goBack = () => {
      router.go(-1)
    }
    return {
      ...toRefs(state),
      goBack,
      goodsClick
    }
  }
}
</script>
<style scoped lang="less">
.van-card {
  text-align: left;
  margin-bottom: 15px;
}
</style>
